// my-fresh-blog/routes/_app.tsx
import { h, Fragment } from "preact";
import { AppProps, FreshContext } from "$fresh/server.ts";
import { Head } from "$fresh/runtime.ts";
import { checkIsAdmin } from "../utils/auth.ts";

export async function handler(req: Request, ctx: FreshContext): Promise<Response> {
  await checkIsAdmin(req, ctx);
  return await ctx.next();
}

export default function App({ Component, state }: AppProps) {
  const isAdmin = state.isAdmin as boolean || false;

  return (
    <html lang="zh-CN">
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        {/* 预加载字体 */}
        <link rel="preconnect" href="https://fonts.googleapis.com" />
        <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
        <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600&display=swap" rel="stylesheet" />
        
        {/* 添加站点图标 */}
        <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
        <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
        <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
        <link rel="manifest" href="/site.webmanifest" />
        
        <title>MiniBlog</title>
        <meta name="description" content="MiniBlog - 精致而简约的博客，专注于优雅的阅读体验和内容呈现" />
      </Head>

      <body class="min-h-screen flex flex-col">
        {/* 噪点纹理背景 */}
        <div class="fixed inset-0 noise-texture opacity-25"></div>
        
        {/* 顶部渐变光效 */}
        <div class="fixed top-0 left-0 w-full h-[40vh] bg-gradient-to-b from-primary-500/15 to-transparent -z-10 pointer-events-none"></div>
        
        {/* 微妙的光晕装饰 */}
        <div class="subtle-glow top-right"></div>
        <div class="subtle-glow bottom-left"></div>
        
        {/* 添加磨砂玻璃效果容器 */}
        <div class="page-glass-container flex-grow flex flex-col">
          <main class="flex-grow">
            <Component />
          </main>
        </div>

        {/* 确保树叶容器被正确加载 */}
        <div id="leaves-container-wrapper"></div>
        
        {/* 确保树叶脚本在页面加载后执行 */}
        <script dangerouslySetInnerHTML={{ __html: `
          document.addEventListener('DOMContentLoaded', function() {
            // 确保页面完全加载后再初始化树叶
            setTimeout(function() {
              if (typeof initLeafFallingEffect === 'function') {
                initLeafFallingEffect();
              }
            }, 1000);
          });
        `}}></script>
        
        {/* 管理员状态指示 */}
        {isAdmin && (
          <div class="fixed bottom-4 right-4 px-3 py-1.5 bg-primary-600/90 text-white text-xs rounded-md shadow-md backdrop-blur-sm">
            管理员模式
          </div>
        )}
      </body>
    </html>
  );
}